<template>
	<view class="dec-position-tab">
		<uv-sticky v-if="!content.show">
			<view class="tab-list">
				<view class="tab-item" :style="[tabStyle]" v-for="(tab, index) in content.tabList" :key="index" @click="handleTabChange(index)">
					<text class="tab-text" 
						:style="{ borderColor: acTab.index === index ? tabStyle.acColor : '#fff', color: acTab.index === index ? tabStyle.acColor : tabStyle.color, fontWeight: acTab.index === index ? 600 : 500}" >
						{{ tab.title }}
					</text>
				</view>
			</view>
		</uv-sticky>
		<scroll-view v-if="scrollViewVisible && acTab.proList.length" scroll-y="true" class="scroll-y" @scrolltolower="handleMore" @scroll="handleScroll">
			<view class="empty-list" v-if="loadingData">
				<uv-loading-icon text="加载中" textSize="30rpx" />
			</view>
			<dec-waterfall :list="acTab.proList" :proStyle="proItemStyle" />
			<uv-load-more :status="moreStatus" height="60" fontSize="28" iconSize="34" line />
		</scroll-view>
		<view class="flex flex-wrap" v-else>
			<view class="empty-list" v-if="loadingData">
				<uv-loading-icon text="加载中" textSize="30rpx" />
			</view>
			<dec-waterfall :list="acTab.proList" :proStyle="proItemStyle" />
			<view class="empty-list" v-if="!loadingData && (!acTab.proList || !acTab.proList.length)">暂无相关商品~</view>
		</view>
	</view>
</template>

<script>
	import { getProducts, getProductSearch } from '@/api/home.js';
	import decWaterfall from '@/components/MyWaterfall/index.vue';
	export default {
		data() {
			return {
				acTab: {
					index: 0,
					proList: []
				},
				scrollViewVisible: false,
				pageQuery: {
					pageNumber: 1,
					pageSize: 10,
					storeId: uni.getStorageSync('currentShopId')
				},
				hasMore: true,
				proListInfo: [],
				loadingData: false,
				moreStatus: 'loadmore'
			}
		},
		props: {
			content: {
				type:Object, 
				default: () => {}
			}
		},
		components: {
			decWaterfall
		},
		computed: {
			tabStyle() {
				let styleObj = {};
				if(this.content.tabList && this.content.tabList.length) {
					styleObj.width = (100 / this.content.tabList.length) + '%';
					styleObj.color = this.content.textColor || '#666';
					styleObj.acColor = this.content.acColor || '#666';
				}
				return styleObj;
			},
			proItemStyle() {
				let styleObj = {};
				styleObj.borderRadius = `${this.content.moduleRadius * 2 || 0}rpx`;
				return styleObj;
			}
		},
		methods: {
			init() {
				this.acTab.index = 0;
				this.getAcInfo();
			},
			getAcInfo() {
				const item = this.content.tabList[this.acTab.index];
				if(item.proType === 0) {
					this.scrollViewVisible = false;
					const ids = item.proList.map(item => item.id);
					if (ids && ids.length) {
						this.getProListInfo(ids);
					} else {
						this.loadingData = false;
						thia.acTab.proList = [];
					}
				} else if (item.proType === 1) {
					this.scrollViewVisible = true;
					this.pageQuery = {
						pageNumber: 1,
						pageSize: 10,
						storeId: uni.getStorageSync('currentShopId'),
						categoryIds: [item.categoryId]
					};
					this.getScorllProList();
				} else if (item.proType === 2) {
					this.pageQuery = {
						pageNumber: 1,
						pageSize: 10,
						storeId: uni.getStorageSync('currentShopId'),
					};
					this.scrollViewVisible = true;
					if(item.speciality === 'recommend') {
						this.pageQuery.recommend = true;
					} else if (item.speciality === 'best') {
						this.pageQuery.best = true;
					} else if(item.speciality === 'hot') {
						this.pageQuery.hot = true;
					}
					this.getScorllProList();
				} else if (item.proType === 3) {
					this.scrollViewVisible = true;
					this.pageQuery = {
						pageNumber: 1,
						pageSize: 10,
						storeId: uni.getStorageSync('currentShopId'),
						brandIds: item.brandIds
					};
					this.getScorllProList();
				}
			},
			async getProListInfo(ids) {
				const params = {ids, storeId: uni.getStorageSync('currentShopId')}
				await getProducts(params).then(res => {
					if(res.success && res.data) {
						let tmpList = res.data || [];
						this.acTab.proList = tmpList;
					}
					this.loadingData = false;
				}).catch(error => {
					console.log(error);
				})
			},
			async getScorllProList() {
				if(!this.loadingData) {
					this.moreStatus = 'loading';
				}
				await getProductSearch(this.pageQuery).then(res => {
					if(res.success) {
						const tempArray = res.data.records || [];
						if(this.pageQuery.pageNumber === 1) {
							this.acTab.proList = tempArray;
						} else {
							this.acTab.proList = [...this.acTab.proList, ...tempArray];
						}
						if(res.data.totalPage > this.pageQuery.pageNumber) {
							this.hasMore = true;
							this.moreStatus = 'loadmore';
						} else {
							this.hasMore = false;
							this.moreStatus = 'nomore';
						}
					}
					this.loadingData = false;
				}).catch(error => {
					console.log(error);
				})
			},
			handleMore() {
				if(!this.hasMore) return;
				this.pageQuery.pageNumber++;
				this.getScorllProList();
			},
			handleScroll(e) {
				this.$emit('scroll', e);
			},
			handleTabChange(index) {
				if(this.moreStatus !== 'loading') {
					if(this.acTab.index === index) return;
					this.acTab.index = index;
					thia.loadingData = true;
					thia.hasMore = true;
					this.getAcInfo();
				}
			}
		},
		mounted() {
			this.init();
			uni.$on('refreshTmpData', () => {
				this.init();
			})
		}
	}
</script>

<style lang="scss" scoped>
	.dec-position-tab {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
	}
	
	.tab-list {
		display: flex;
		width: 750rpx;
		height: 80rpx;
		background-color: #fff;
	
		.tab-item {
			display: inline-flex;
			height: 80rpx;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 30rpx;
		}
	
		.tab-text {
			border-bottom: 4rpx solid #fff;
			padding: 8rpx 20rpx;
		}
	}
	
	.pro-list {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx;
		justify-content: space-between;
	}
	
	.scroll-y {
		width: 750rpx;
		height: 1500rpx;
	}
	
	.empty-list {
		display: flex;
		width: 100%;
		justify-content: center;
		color: #ccc;
		font-size: 26rpx;
		margin: 30rpx 0;
	}
</style>